import React, {
    PureComponent
} from 'react';

import {
    Image,
    View,
    StyleSheet
} from 'react-native';

import moment from 'moment';

import date_icon from './img/date.png';

import * as Const from './../../const';

import DatePicker from '@react-native-community/datetimepicker';

import {
    Input,
    Dialog
} from './../../components';

import ModalBox from './modal';

interface _Props {
    value: any,
    format:string,
    onChange: Function,
    placeholder:string
}

const maxDate = (() => {
    const time = Date.now() - 1000 * 60 * 60 * 24 * 30 * 12 * 19;
    return new Date(time);
})();


class Birthday extends PureComponent<_Props> {

    static defaultProps = {
        value: ``,
        format:``,
        onChange: () => null
    }

    state = {
        showPicker:false
    }

    _onPress = async () => {
        const {
            value
        } = this.props;

        const curValue = value || maxDate;

        const content = (
            <ModalBox value={curValue} onDone={this.onDateChange}/>
        )

        Dialog.show(content,{
            clickClose:true,
            direction:`bottom`
        })
    }

    onDateChange = (date:any) => {
        const {
            format,
            onChange
        } = this.props;

        const _val = !!format ?
            moment(date).format(format): new Date(date);

        onChange(_val);
    }


    get showName() {
        const {
            value
        } = this.props;
        const format = `MMM DD, YYYY`;
        return value ? moment(value).format(format) : ``;
    }

    render() {
        const {
            placeholder
        } = this.props;

        return (
            <Input
                disabled={true}
                value={this.showName}
                onPress={this._onPress}
                placeholder={placeholder}
                renderRight={() => (
                    <Image source={date_icon}/>
                )}
            />
        )
    }
}

export default Birthday;

const styles = StyleSheet.create({
    arrowStyle: {
        marginRight:8
    },
    modal:{
        paddingVertical:16,
        backgroundColor:`#f2f2f2`
    }
}) as any;